JavaScript Source Code 2002: Forms: Items Popup List

Home

Items Popup List

If you have several items for the user to pick from, you may notice that your page can quickly becomes cluttered. This script helps solve that problem by opening a new window when the user wants to add items to the list. The new window displays the items and passes the selected item information back to the list in the main window. Slick!

(Click "Add Item" to demo this script!)

JavaScript Source Code 2002: Forms: Items Popup List
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!

  <html> <head> <script language="JavaScript"> Begin  </SCRIPT> </head> <body onLoad="javascript:fillInitialDestList();"> <center> <form method="POST"> <table bgcolor="#FFFFCC"> <tr> <td bgcolor="#FFFFCC" width="74">Available</td> <td bgcolor="#FFFFCC"> </td> <td bgcolor="#FFFFCC" width="69">Selected</td> </tr> <tr> <td bgcolor="#FFFFCC" width="85"> <select size="6" name="srcList" multiple> <option value="1">Item 1 <option value="2">Item 2 <option value="3">Item 3 <option value="4">Item 4 <option value="5">Item 5 <option value="6">Item 6 </select> </td> <td bgcolor="#FFFFCC" width="74" align="center"> <input type="button" value=" >> " onClick="javascript:addSrcToDestList()"> <br><br> <input type="button" value=" << " onclick="javascript:deleteFromDestList();"> </td> <td bgcolor="#FFFFCC" width="69"> <select size="6" name="destList" multiple> </select> </td> </tr> <tr> <td colspan=3 align="center"> <input type="button" value="Done" onClick = "javascript:addSelectedItemsToParent()"> </td> </tr> </table> </form> </body> </html>  <HEAD> <SCRIPT LANGUAGE="JavaScript">   <! > <! >  </script> </HEAD>  <BODY> <center> <form method=post> <table border=1 bgcolor="#ffffcc"> <tr> <td> <select size=5 name=parentList multiple> </select> </td> </tr> <tr> <td align=center> <input type=button value="Add Item" onclick = "javascript:small_window('modify.html');"> <input type=button value="Delete Item" onclick = "javascript:deleteSelectedItemsFromList(parentList);"> </td> </tr> </table> </form> </center>